<template>
  <div>
    <div class="select-accoutn">
      <div class="acc-title">账号登录</div>
      <div class="acc-text">
        <div class="input_phone">
          <input
            type="text"
            placeholder="请输入手机号码或邮箱"
            v-model="uname"
          />
        </div>
        <div class="input_pwd">
          <input type="password" placeholder="请输入密码" v-model="pwd" />
        </div>
        <div class="input_tips">
          <span>忘记密码</span>
        </div>
        <div class="input_error" v-show="isshow">
          <span>用户不存在或用户账号密码不对</span>
        </div>
        <div class="passlogin">
          <button @click="login">登录</button>
        </div>
        <div class="linkContainer">
          <a class="link" href="javascript:;">隐私政策</a>
          <a class="link2" href="javascript:;" @click="register">注册账号</a>
        </div>
        <div class="auth">
          <div class="auth_list">其他方式登录</div>
          <div class="auth_list2">
            <a
              href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101860840&redirect_uri=https%3A%2F%2Fid.heytap.com%2Findex.html%3FthirdPartyType%3Dqq%26language%3Dzh-CN&state=39859000854442383"
              ><img v-lazy="penguin" alt=""
            /></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoods, userLogin } from "../assets/request";

export default {
  data() {
    return {
      goods: [],
      penguin: "",
      uname: "",
      pwd: "",
      isshow: false,
    };
  },
  async created() {
    await getGoods({
      project_id: 78,
      limit: 200,
    }).then((res) => {
      this.goods = res.rows.sort((a, b) => a.id - b.id);
      this.penguin = this.goods.slice(81, 82)[0].s_goods_photos[0].path;
    });
  },
  methods: {
    async login() {
      await userLogin({
        phone: this.uname,
        password: this.pwd,
      }).then(
        (res) => {
          sessionStorage.setItem("token", res.token);
          sessionStorage.setItem("isLogin", true);
          this.$router.push("./index");
          this.isshow = false;
        },
        (err) => {
          this.isshow = true;
        }
      );
    },
    register() {
      this.$router.push("./register");
    },
  },
};
</script>

<style lang="scss" scoped>
.select-accoutn {
  padding-top: 50px;
  .acc-title {
    font-size: 26px;
    text-align: center;
    margin-bottom: 40px;
  }
  .acc-text {
    .input_phone {
      width: 300px;
      height: 45px;
      margin: 0 auto;
      margin-bottom: 10px;
      input {
        width: 300px;
        height: 45px;
        font-size: 12px;
        background-color: #f7f7f7;
        border: none;
        box-sizing: border-box;
        padding-left: 15px;
      }
    }
    .input_pwd {
      width: 300px;
      height: 45px;
      margin: 0 auto;
      input {
        width: 300px;
        height: 45px;
        font-size: 12px;
        background-color: #f7f7f7;
        border: none;
        box-sizing: border-box;
        padding-left: 15px;
      }
    }
    .input_tips {
      width: 300px;
      height: 10px;
      margin: 9px auto;
      span {
        cursor: pointer;
        color: rgba(0, 0, 0, 0.6);
      }
    }
    .input_error {
      color: #ec5b66;
      text-align: center;
      margin: 30px 0 auto;
      font-size: 12px;
      display: block;
    }
    .passlogin {
      width: 300px;
      height: 45px;
      margin: 9px auto;

      button {
        width: 300px;
        height: 45px;
        color: #fff;
        background-color: #2ad181;
        border: none;
        border-radius: 9px;
        cursor: pointer;
        transition: 0.1s;
      }
    }
    .linkContainer {
      width: 300px;
      height: 42px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .link {
        color: rgba(0, 0, 0, 0.6);
        font-size: 12px;
        &:hover {
          opacity: 0.8;
        }
      }
      .link2 {
        color: #2ad181;
        font-size: 12px;
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .auth {
      margin: 20px auto;
      text-align: center;
      padding-bottom: 40px;
      .auth_list {
        color: #9b9b9b;
        font-size: 12px;
        line-height: 1;
        margin: 0 auto;
        margin-bottom: 20px;
        position: relative;
        width: 72px;
        &::before {
          content: "";
          height: 1px;
          position: absolute;
          top: 5px;
          background: #000;
          opacity: 0.08;
          left: -114px;
          width: 99px;
        }
        &::after {
          content: "";
          height: 1px;
          position: absolute;
          top: 5px;
          background: #000;
          opacity: 0.08;
          right: -114px;
          width: 99px;
        }
      }
    }
  }
}
</style>